<template>
  <template v-if="!info.meta?.hidden">
    <template v-if="!info.children || info.meta?.hideChildrenInMenu">
      <a-menu-item :key="info.path">
        <template #icon v-if="info.meta?.icon">
          <span v-if="isString(info.meta.icon)" :class="['iconfont', info.meta?.icon || '']"></span>
          <component v-else :is="info.meta?.icon"></component>
        </template>
        <span style="user-select: none">{{ info.meta?.title || info.name }}</span>
      </a-menu-item>
    </template>
    <template v-else>
      <a-sub-menu :key="info.path">
        <template #icon v-if="info.meta?.icon">
          <span v-if="isString(info.meta.icon)" :class="['iconfont', info.meta?.icon || '']"></span>
          <component v-else :is="info.meta?.icon"></component>
        </template>
        <template #title>
          <span style="user-select: none">
            {{ info.meta?.title || info.name }}
          </span>
        </template>
        <SubMenu v-for="item in info.children" :info="item"></SubMenu>
      </a-sub-menu>
    </template>
  </template>
</template>

<script lang="ts" setup>
import { isString } from 'lodash-es';
import type { RouterInterface } from '@/router/types';
interface PropsType {
  info?: RouterInterface | any;
}
withDefaults(defineProps<PropsType>(), {
  info: {},
});
</script>
